<template>
	<view class="bigBox">

		<swiper class="swiper" :indicator-dots="true" :duration="1000">
			<swiper-item class="swiper-item" v-for="item in swiper" :key='item.id'>
				<image :src="item.src"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>￥{{goodsDetail.sell_price}}</text>
				<text>￥{{goodsDetail.market_price}}</text>
			</view>
			<view class="title">
				<text>{{goodsDetail.title}}</text>
			</view>
		</view>
		<view class="box2">
			<view>
				货号：{{goodsDetail.goods_no}}
			</view>
			<view>
				库存：{{goodsDetail.stock_quantity}}
			</view>
		</view>
		<view class="box3">
			<view class="content_title">
				详细介绍
			</view>
			<view class="content">
				<rich-text :nodes="content.content"></rich-text>
			</view>
		</view>
		<view class="navCart">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['getWebNums'])
		},
		components: {
			uniGoodsNav
		},

		onLoad(options) {
			this.id = options.id
			this.getSwiper()
			this.getGoodsDetail()
			this.getContent()



		},
		data() {
			return {

				id: 0,
				swiper: [],
				goodsDetail: {},
				content: {},
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: ''
					// infoBackgroundColor: '#007aff',
					// infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					// info:this.$store.getters.getNums
					info: 0+this.getWebNums
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff',
						url: '../../cart/cart'
					}
				]
			};
		},

		methods: {

			//获取产品详情页轮播图
			async getSwiper() {
				const res = await uni.request({
					url: 'http://localhost:8082/api/getthumimages/' + this.id
				})
				// console.log(res)
				const data = res[1].data
				if (data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				} else {
					this.swiper = data.message
					// console.log(this.swiper)
				}
			},
			//获取详情参数
			async getGoodsDetail() {
				const res = await uni.request({
					url: 'http://localhost:8082/api/goods/getinfo/' + this.id
				})
				// console.log(res)
				const data = res[1].data
				if (data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				} else {
					this.goodsDetail = data.message[0]
					// console.log(this.goodsDetail)
				}
			},
			//获取详细介绍
			async getContent() {
				const res = await uni.request({
					url: 'http://localhost:8082/api/goods/getdesc/' + this.id
				})
				// console.log(res)
				const data = res[1].data
				if (data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				} else {
					this.content = data.message[0]
					// console.log(this.content)
				}
			},
			// 购物车
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				// console.log(e)
				// this.options[2].info++
				if (e.index === 0) {
					// console.log(this.$store.state.obj)
					const addGoodsDetail = {
						url: this.swiper[1],
						id: this.goodsDetail.id,
						title: this.goodsDetail.title,
						goods_no: this.goodsDetail.goods_no,
						price: this.goodsDetail.sell_price,
						nums: 1,
						url: this.swiper[0].src,
						check:false
					}
					// this.options[2].info++
					// this.$store.commit('addCartNum', this.options[2].info)
					this.$store.commit('addCartState', addGoodsDetail)


				} else {
					uni.switchTab({
						url: '../../cart/cart'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.bigBox {
		padding: 0 20rpx;
	}

	.swiper {
		height: 700rpx;
		width: 710rpx;

		.swiper-item {
			text-align: center;

			image {
				height: 100%;
				weight: 100%;
			}
		}
	}

	.box1 {
		border-bottom: 2px solid #eee;

		.price {
			margin: 10rpx 0 20rpx;
			color: #b50e03;
			font-size: 40rpx;

			text:nth-child(2) {
				font-size: 35rpx;
				text-decoration: line-through;
				color: #ccc;
				margin-left: 20rpx;
			}
		}

		.title {
			font-size: 30rpx;
			line-height: 60rpx;
		}
	}

	.box2 {
		border-bottom: 2px solid #eee;
		font-size: 30rpx;
		line-height: 60rpx;
	}

	.box3 {
		.content {
			margin-top: 10rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			margin-bottom: 100rpx;
		}
	}

	.navCart {
		width: 750rpx;
		position: fixed;
		bottom: 0px;
	}
</style>
